<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>药品信息管理</title>
    <!--    media="all"：这个CSS在所有页面都可以使用-->
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/admin/style.css}" media="all">
</head>
<body class="layui-layout-body">
<!--自适应宽度-->
<div class="layui-fluid">
    <!--    每一行的样式-->
    <div class="layui-row layui-col-space15">
        <!--        每一列的样式-->
        <div class="layui-col-md12">
            <!--            卡片元素-->
            <div class="layui-card">
                <div class="layui-card-header">药品信息列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="main-table" lay-filter="main-table"></table>
<!--                    头部工具-->
                    <script type="text/html" id="toolbarDemo">
                        <span class="layui-inline" lay-event="add"><i class="layui-icon">&#xe654;</i></span>
                        <span class="layui-inline" style="width: 240px;">
                            <input class="layui-input" name="param" id="param" placeholder="根据药品名称查询"
                                   autocomplete="off">
                        </span>
                        <span class="layui-btn layui-btn-sm layui-bg-red" lay-event="querySearch">
                            <i class="layui-icon">&#xe615;</i>查询
                        </span>
                    </script>
<!--                    编辑和删除-->
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/static/layui/layui.js}"></script>
<script>
    layui.use(['table', 'form'], function () {
        var $ = layui.$;
        // 加载table
        var table = layui.table;
        // 获取数据
        table.render({
            elem: '#main-table',// 放入数据的位置
            height: 500,
            url: '/druginfo/druginfoQueryPages',// 访问的地址
            method: 'POST',
            page: true,
            id: 'table-load',
            toolbar: '#toolbarDemo',
            // 有哪些列
            cols: [
                [   // type:'numbers'->序号增加
                    {title: '序号', type:'numbers' , width: '5%', align: 'center'}, // 第一列
                    {field: 'name', title: '药品名称', align: 'center'},// 第二列
                    {field: 'supplier', title: '供应商', align: 'center'},
                    {field: 'warrenty', title: '保质期(月)', align: 'center'},
                    {field: 'number', title: '药品编码', align: 'center'},
                    {field: 'price', title: '药品价格', align: 'center'},
                    {field: 'stock', title: '药品库存', align: 'center'},
                    {
                        field: 'producttime',
                        title: '生产时间',
                        align: 'center',
                        templet: "<div>{{layui.util.toDateString(d.producttime,'yyyy-MM-dd')}}</div>"  // 转换时间格式
                    },
                    {title: '操作',align: 'center',toolbar:'#barDemo',fixrd:'right'}
                ]
            ]
        });
        //    监听头工具栏事件
        table.on('toolbar(main-table)', function (obj) {
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type:2,
                        title:'新增药品信息',    // 页面名称
                        content:'/druginfo/druginfoPage',   //转向的地址
                        shade:[0.8,'#393d49'], // 圆角和弹出后的透明度
                        area:['600px','530px'], //区域：宽高
                        btn:['确定','取消'],    // 确定和取消按钮
                        yes:function (index, layero){ // 点击确定的函数
                            var iframeWindow = window['layui-layer-iframe'+index];
                            // 获取按钮，找到iframe标签里的内容里面找到LAY_front-submit这个按钮
                            var submit = layero.find('iframe').contents().find("#LAY_front-submit");
                            // 监听提交
                            iframeWindow.layui.form.on('submit(LAY_front-submit)',function (data){
                                // 获取到数据里的field，传入到后台
                                var field = data.field;
                                // 用ajax提交数据
                                $.ajax({
                                    url: '/druginfo/druginfoAdd', //提交到哪个页面
                                    data:field, // 提交的数据
                                    async:false, // 是否是异步提交：不是
                                    cache:false, // 不需要缓存
                                    success: function (str){ // 如果成功，返回值
                                        if (str.code === 0){ // 如果是0，则成功
                                            // 刷新数据到table里面
                                            table.reload('table-load');
                                        }
                                        // 如论成功失败，都提示msg
                                        layer.msg(str.msg,{icon:str.icon,anim:str.anim});
                                    }
                                });
                                // ajax提交完数据后，需要关闭弹窗
                                layer.close(index);
                            });
                            submit.trigger('click'); // 点击事件生效
                        },
                        success:function (layero,index){

                        }
                    });
                    break;
                case 'querySearch':
                    var param = $('#param').val();
                    // 刷新当前tab
                    table.reload('table-load', {
                        where: {
                            param: param
                        }
                    });
                    // 将查询栏里输入的值再刷新回来，也就是查询完，并且刷新数据之后，查询栏里还有原来输入的查询条件
                    $('#param').val(param);
                    break;
            }
        });
        //    监听编辑和删除
        table.on('tool(main-table)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                // 编辑
                case 'edit':
                    layer.open({
                        type:2,
                        title:'编辑药品信息',    // 页面名称
                        content:'/druginfo/druginfoQueryById?id='+data.id,   //转向的编辑页面地址
                        shade:[0.8,'#393d49'], // 圆角和弹出后的透明度
                        area:['600px','530px'], //区域：宽高
                        btn:['确定','取消'],    // 确定和取消按钮
                        yes:function (index, layero){ // 点击确定的函数
                            var iframeWindow = window['layui-layer-iframe'+index];
                            // 获取按钮，找到iframe标签里的内容里面找到LAY_front-submit这个按钮
                            var submit = layero.find('iframe').contents().find("#LAY_front-submit");
                            // 监听提交
                            iframeWindow.layui.form.on('submit(LAY_front-submit)',function (data){
                                // 获取到数据里的field，传入到后台
                                var field = data.field;
                                // 用ajax提交数据
                                $.ajax({
                                    url: '/druginfo/druginfoEdit', //提交到哪个页面
                                    data:field, // 提交的数据
                                    async:false, // 是否是异步提交：不是
                                    cache:false, // 不需要缓存
                                    success: function (str){ // 如果成功，返回值
                                        if (str.code === 0){ // 如果是0，则成功
                                            // 刷新数据到table里面
                                            table.reload('table-load');
                                        }
                                        // 如论成功失败，都提示msg
                                        layer.msg(str.msg,{icon:str.icon,anim:str.anim});
                                    }
                                });
                                // ajax提交完数据后，需要关闭弹窗
                                layer.close(index);
                            });
                            submit.trigger('click'); // 点击事件生效
                        },
                        success:function (layero,index){

                        }
                    });
                    break;
                // 删除
                case 'del':
                    layer.confirm('确认要删除吗？',function (index){
                        // 通过ajax删除
                        $.ajax({
                            url: '/druginfo/druginfoDelById?id='+data.id, //提交到哪个页面
                            data:null, // 提交的数据
                            async:false, // 是否是异步提交：不是
                            cache:false, // 不需要缓存
                            success: function (str){ // 如果成功，返回值
                                if (str.code === 0){ // 如果是0，则成功
                                    // 刷新数据到table里面
                                    table.reload('table-load');
                                }
                                // 如论成功失败，都提示msg
                                layer.msg(str.msg,{icon:str.icon,anim:str.anim});
                            }
                        });
                    });
                    break;
            }
        });
    });
</script>
</body>
</html>